<template>
  <div class="labelDefault">
    <open-module class="zt">
      <div slot="center" class="center">
              <span v-for="(v,k) of labelTow" :key="k" @click="label(k)"><a :style="color(k)">{{k}}</a></span>
      </div>
    </open-module>
  </div>
</template>
<script>
import openModule from "components/content/openModule/OpenModule.vue";
export default {
  name: "labelDefault",
  props: {
    labelTow: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  data() {
    return {};
  },
  components: { openModule },
  methods: {
      color(k){
        //设置标签等级展示
          let v = this.labelTow[k]
          let co ="";
          let width =""
          let height=""
          if(v<2){ 
              co =  "rgb(152, 226, 255)";
               width ="10px"
           height="5px"
          }
          else if(v<4){
              co =  "rgb(99, 210, 253)";
          }
          else if(v<7){
              co =  "rgb(5, 183, 253)";
          }else if(v<10){
              co =  "rgb(0, 64, 182)";
          }
          return {
              color:co,
              fontSize:(10+v*4)+"px",
              margin:(10+v*3)+"px",
          }
      },
      auto(x,y){
          return y-Math.random()*(y-x)
      },
      label(k){
        this.$emit("clickLabel",k)
      }
  },
};
</script>
<style scoped>
.labelDefault {
    margin-bottom: 300px;
}
.center{
    width: 400px;
    height: 200px;
}
span{
    display: inline-block; 
    float: left;
}
a{
   display: inline-block; 
}
a:hover{
    color: rgb(26, 124, 236) !important;
}
</style>